<template>
	<view class="activity-container">

		<!-- 搜索和筛选区域 -->
		<view class="filter-section">

			<!-- 分类标签 -->
			<scroll-view scroll-x class="category-tags">
				<view 
					class="tag-item" 
					:class="{ active: currentCategory === 'all' }"
					@click="changeCategory('all')"
				>
					全部
				</view>
				<view 
					class="tag-item" 
					:class="{ active: currentCategory === 'ongoing' }"
					@click="changeCategory('ongoing')"
				>
					报名中
				</view>
				<view 
					class="tag-item" 
					:class="{ active: currentCategory === 'ended' }"
					@click="changeCategory('ended')"
				>
					已结束
				</view>
			</scroll-view>
		</view>
		
		<!-- 活动列表 -->
		<scroll-view 
			scroll-y 
			class="activity-list"
			@scrolltolower="onLoadMore"
			:refresher-enabled="true"
			:refresher-triggered="refreshing"
			@refresherrefresh="onRefresh"
		>
			<!-- 列表内容 -->
			<view v-if="activityList.length > 0">
				<view 
					class="activity-item" 
					v-for="item in activityList" 
					:key="item.id"
					@click="goToDetail(item.id)"
				>
					<!-- 活动封面 -->
					<view class="activity-cover">
						<image :src="getImageUrl(item.cover) || '/static/activity-default.png'" mode="aspectFill"></image>
						<view class="status-tag" :class="getStatusClass(item)">
							{{ getStatusText(item) }}
						</view>
						<view class="time-tag">
							<uni-icons type="calendar" size="12" color="#fff"></uni-icons>
							<text>{{ formatDate(item.startTime) }}</text>
						</view>
					</view>
					
					<!-- 活动信息 -->
					<view class="activity-info">
						<view class="activity-title">{{ item.title }}</view>
						
						<view class="activity-meta">
							<view class="meta-item">
								<uni-icons type="location" size="14" color="#666"></uni-icons>
								<text>{{ item.location }}</text>
							</view>
							<view class="meta-item">
								<uni-icons type="person" size="14" color="#666"></uni-icons>
								<text>{{ item.currentParticipants }}/{{ item.maxParticipants }}人</text>
							</view>
						</view>
						
						<!-- 进度条 -->
						<view class="activity-progress">
							<progress 
								:percent="(item.currentParticipants / item.maxParticipants) * 100" 
								stroke-width="3" 
								:activeColor="getProgressColor(item)"
								backgroundColor="#eee"
							></progress>
						</view>
					</view>
				</view>
				
				<!-- 加载更多 -->
				<view class="load-more" v-if="hasMore">
					<uni-load-more status="loading" :contentText="loadMoreText"></uni-load-more>
				</view>
				<view class="load-more" v-else>
					<uni-load-more status="noMore" :contentText="loadMoreText"></uni-load-more>
				</view>
			</view>
			
			<!-- 空状态 -->
			<view v-else-if="!loading" class="empty-state">
				<image src="/static/empty.png" mode="aspectFit"></image>
				<text>您还没有参加任何活动</text>
				<button class="go-activity-btn" @click="goToActivityList">去浏览活动</button>
			</view>
			
			<!-- 加载中 -->
			<view v-else class="loading-state">
				<uni-load-more status="loading" :contentText="loadMoreText"></uni-load-more>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { getMyActivities } from '@/api/activity.js';
import { getImageUrl } from '@/utils/image.js';

export default {
	data() {
		return {
			activityList: [],
			pageNum: 1,
			pageSize: 10,
			total: 0,
			loading: false,
			refreshing: false,
			hasMore: true,
			searchKeyword: '',
			currentCategory: 'all',
			loadMoreText: {
				contentdown: '上拉加载更多',
				contentrefresh: '加载中...',
				contentnomore: '没有更多了'
			}
		};
	},
	onLoad() {
		this.loadActivityList();
	},
	
	// 页面显示时检查是否需要刷新
	onShow() {
		// 获取全局标记，判断是否需要刷新活动列表
		const app = getApp();
		if (app.globalData && app.globalData.activityListNeedRefresh) {
			console.log('从详情页返回，需要刷新活动列表');
			// 重置列表并刷新数据
			this.resetList();
			this.loadActivityList();
			// 重置全局标记
			app.globalData.activityListNeedRefresh = false;
		}
	},
	methods: {
		getImageUrl,
		
		// 重置列表数据
		resetList() {
			this.activityList = [];
			this.pageNum = 1;
			this.hasMore = true;
		},
		
		// 加载活动列表
		async loadActivityList() {
			if (!this.hasMore) return;
			
			this.loading = true;
			try {
				const params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					keyword: this.searchKeyword,
					category: this.currentCategory
				};
				
				console.log('加载我的活动列表，参数:', params);
				
				const res = await getMyActivities(params);
				console.log('我的活动列表结果:', res);
				
				if (res.code === 200) {
					const { records, total } = res.data;
					this.total = total;
					
					// 过滤活动状态
					const filteredRecords = records.filter(item => {
						if (this.currentCategory === 'all') {
							return item.status === 1 || item.status === 2;
						} else if (this.currentCategory === 'ongoing') {
							return item.status === 1;
						} else if (this.currentCategory === 'ended') {
							return item.status === 2;
						}
						return true;
					});
					
					if (this.pageNum === 1) {
						this.activityList = filteredRecords;
					} else {
						this.activityList = [...this.activityList, ...filteredRecords];
					}
					
					this.hasMore = this.activityList.length < total;
					this.pageNum++;
				} else {
					uni.showToast({
						title: res.message || '加载失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('加载我的活动列表失败', error);
				uni.showToast({
					title: '网络异常，请稍后重试',
					icon: 'none'
				});
			} finally {
				this.loading = false;
				if (this.refreshing) {
					this.refreshing = false;
				}
			}
		},
		
		// 下拉刷新
		onRefresh() {
			this.refreshing = true;
			this.resetList();
			this.loadActivityList();
		},
		
		// 加载更多
		onLoadMore() {
			if (!this.loading && this.hasMore) {
				this.loadActivityList();
			}
		},
		
		// 格式化日期
		formatDate(dateStr) {
			if (!dateStr) return '';
			const date = new Date(dateStr);
			return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
		},
		
		// 获取活动状态样式
		getStatusClass(activity) {
			if (activity.status === 1) {
				return 'status-ongoing';
			} else {
				return 'status-ended';
			}
		},
		
		// 获取活动状态文本
		getStatusText(activity) {
			if (activity.status === 1) {
				return '报名中';
			} else {
				return '已结束';
			}
		},
		
		// 获取进度条颜色
		getProgressColor(activity) {
			if (activity.status === 1) {
				return '#19be6b';
			} else {
				return '#909399';
			}
		},
		
		// 跳转到详情页
		goToDetail(id) {
			uni.navigateTo({
				url: `/pages/activity/detail?id=${id}`
			});
		},
		
		// 跳转到活动列表页
		goToActivityList() {
			uni.switchTab({
				url: '/pages/activity/activity'
			});
		},
		
		onSearch() {
			this.resetList();
			this.loadActivityList();
		},
		
		changeCategory(category) {
			this.currentCategory = category;
			this.resetList();
			this.loadActivityList();
		}
	}
};
</script>

<style lang="scss" scoped>
.activity-container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #f5f5f5;
	
	.page-header {
		padding: 20rpx 30rpx;
		background-color: #fff;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		
		.page-title {
			font-size: 34rpx;
			font-weight: bold;
			color: #333;
			position: relative;
			padding-left: 24rpx;
			
			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 8rpx;
				height: 28rpx;
				background: linear-gradient(to bottom, #2979ff, #5e9fff);
				border-radius: 4rpx;
			}
		}
	}
	
	.filter-section {
		background-color: #fff;
		padding: 20rpx 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		position: sticky;
		top: 0;
		z-index: 10;
		
		.search-box {
			display: flex;
			align-items: center;
			background-color: #f5f5f5;
			border-radius: 30rpx;
			padding: 12rpx 20rpx;
			margin-bottom: 20rpx;
			
			input {
				flex: 1;
				height: 60rpx;
				font-size: 28rpx;
				margin-left: 10rpx;
			}
		}
		
		.category-tags {
			white-space: nowrap;
			padding: 10rpx 0;
			
			.tag-item {
				display: inline-block;
				padding: 10rpx 30rpx;
				margin-right: 20rpx;
				border-radius: 30rpx;
				font-size: 26rpx;
				color: #666;
				background-color: #f5f5f5;
				transition: all 0.3s ease;
				
				&.active {
					color: #fff;
					background: linear-gradient(to right, #2979ff, #5e9fff);
					box-shadow: 0 4rpx 12rpx rgba(41, 121, 255, 0.2);
				}
			}
		}
	}
	
	.activity-list {
		width: 90%;
		margin: 0 auto;
		flex: 1;
		padding: 20rpx;
		
		.activity-item {
			background-color: #fff;
			border-radius: 16rpx;
			margin-bottom: 24rpx;
			overflow: hidden;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
			transform: translateY(0);
			transition: all 0.3s ease;
			
			&:active {
				transform: translateY(2rpx);
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
			}
			
			.activity-cover {
				position: relative;
				height: 320rpx;
				overflow: hidden;
				
				image {
					width: 100%;
					height: 100%;
					transition: transform 0.6s ease;
				}
				
				&:hover image {
					transform: scale(1.05);
				}
				
				.status-tag {
					position: absolute;
					top: 20rpx;
					right: 20rpx;
					padding: 8rpx 20rpx;
					border-radius: 30rpx;
					font-size: 24rpx;
					color: #fff;
					font-weight: 500;
					box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
					
					&.status-ongoing {
						background: linear-gradient(to right, #19be6b, #39e588);
					}
					
					&.status-ended {
						background: linear-gradient(to right, #909399, #c0c4cc);
					}
				}
				
				.time-tag {
					position: absolute;
					bottom: 20rpx;
					left: 20rpx;
					padding: 6rpx 16rpx;
					border-radius: 20rpx;
					background-color: rgba(0, 0, 0, 0.5);
					display: flex;
					align-items: center;
					
					text {
						color: #fff;
						font-size: 24rpx;
						margin-left: 6rpx;
					}
				}
			}
			
			.activity-info {
				padding: 24rpx;
				
				.activity-title {
					font-size: 32rpx;
					font-weight: bold;
					margin-bottom: 16rpx;
					color: #333;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				
				.activity-meta {
					display: flex;
					justify-content: space-between;
					margin-bottom: 20rpx;
					
					.meta-item {
						display: flex;
						align-items: center;
						font-size: 24rpx;
						color: #666;
						
						text {
							margin-left: 6rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							max-width: 200rpx;
						}
					}
				}
				
				.activity-progress {
					margin-top: 16rpx;
					
					progress {
						border-radius: 10rpx;
						overflow: hidden;
					}
				}
			}
		}
		
		.load-more {
			padding: 30rpx 0;
		}
		
		.empty-state {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding-top: 200rpx;
			
			image {
				width: 220rpx;
				height: 220rpx;
				margin-bottom: 30rpx;
				opacity: 0.8;
			}
			
			text {
				color: #999;
				font-size: 28rpx;
				letter-spacing: 2rpx;
				margin-bottom: 30rpx;
			}
			
			.go-activity-btn {
				background: linear-gradient(to right, #2979ff, #5e9fff);
				color: #fff;
				font-size: 28rpx;
				padding: 10rpx 40rpx;
				border-radius: 40rpx;
				margin-top: 20rpx;
				box-shadow: 0 4rpx 12rpx rgba(41, 121, 255, 0.2);
			}
		}
		
		.loading-state {
			padding: 40rpx 0;
		}
	}
}
</style> 